import { Button } from "../ui/button";
import { cn } from "@repo/ui/lib/utils";
import {
	BoldIcon,
	CodeIcon,
	ItalicIcon,
	StrikethroughIcon,
	UnderlineIcon,
} from "lucide-react";
import { EditorBubbleItem, useEditor } from "novel";
import type { SelectorItem } from "./node-selector";

export const TextButtons = () => {
	const { editor } = useEditor();
	if (!editor) return null;
	const items: SelectorItem[] = [
		{
			name: "bold",
			isActive: (editor) => editor.isActive("bold"),
			command: (editor) => editor.chain().focus().toggleBold().run(),
			icon: BoldIcon,
		},
		{
			name: "italic",
			isActive: (editor) => editor.isActive("italic"),
			command: (editor) => editor.chain().focus().toggleItalic().run(),
			icon: ItalicIcon,
		},
		{
			name: "underline",
			isActive: (editor) => editor.isActive("underline"),
			command: (editor) => editor.chain().focus().toggleUnderline().run(),
			icon: UnderlineIcon,
		},
		{
			name: "strike",
			isActive: (editor) => editor.isActive("strike"),
			command: (editor) => editor.chain().focus().toggleStrike().run(),
			icon: StrikethroughIcon,
		},
		{
			name: "code",
			isActive: (editor) => editor.isActive("code"),
			command: (editor) => editor.chain().focus().toggleCode().run(),
			icon: CodeIcon,
		},
	];
	return (
		<div className="flex">
			{items.map((item) => (
				<EditorBubbleItem
					key={item.name}
					onSelect={(editor) => {
						item.command(editor);
					}}
				>
					<Button
						size="sm"
						className="rounded-none group hover:bg-[#21303D]"
						variant="ghost"
					>
						<item.icon
							className={cn(
								"h-4 w-4 text-gray-400 group-hover:text-[#369DFD]",
								{
									"text-white group-hover:text-white": item.isActive(editor),
								},
							)}
						/>
					</Button>
				</EditorBubbleItem>
			))}
		</div>
	);
};
